<template>
  <div class="w-full max-w-full dark:bg-[#121826] mx-auto px-4 py-6">
    <h2
      class="text-2xl sm:text-3xl dark:text-gray-200 font-bold text-center mb-6"
    >
      Blog Archives
    </h2>
    <div class="space-y-4 sm:space-y-6">
      <!-- Year Section -->
      <div
        v-for="year in YearList"
        :key="year"
        class="shadow-md rounded-lg p-3 sm:p-4"
      >
        <div
          class="flex justify-between items-center cursor-pointer p-2 sm:p-3 bg-gray-100 dark:bg-[#121826] rounded-md"
          @click="toggleYear(year)"
        >
          <h3
            class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200 truncate"
          >
            {{ year }}
          </h3>
          <span
            :class="{ 'rotate-180': activeYear === year }"
            class="text-gray-500 dark:text-gray-200 transition-transform duration-300"
          >
            ▼
          </span>
        </div>
        <!-- Months Section -->
        <div
          v-show="activeYear === year"
          class="mt-3 sm:mt-4 space-y-3 animate__animated animate__fadeIn duration-300"
        >
          <div
            v-for="(monthData, index) in monthMap[year]"
            :key="`${year}-${monthData.month}`"
            class="pl-3 sm:pl-4"
          >
            <div
              class="flex justify-between items-center cursor-pointer p-2 bg-gray-50 dark:bg-[#121826] rounded-md hover:bg-gray-100 dark:hover:bg-gray-600 transition"
              @click="toggleMonth(`${year}-${monthData.month}`)"
            >
              <h4
                class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-100 truncate"
              >
                {{ monthData.month }} 月
              </h4>
              <span
                :class="{
                  'rotate-180': activeMonth === `${year}-${monthData.month}`
                }"
              >
                ▼
              </span>
            </div>

            <!-- Articles Section -->
            <ul
              v-show="activeMonth === `${year}-${monthData.month}`"
              class="mt-2 animate__animated animate__fadeInUp space-y-2 pl-4 sm:pl-6 border-l-2 border-gray-300 dark:border-gray-600"
            >
              <li
                v-for="article in monthData.articles"
                :key="article.id"
                class="text-sm sm:text-base text-gray-600 dark:text-gray-300 flex justify-between items-center py-1 sm:py-2 hover:text-blue-500"
              >
                <a
                  class="hover:underline cursor-pointer flex-1 truncate"
                  :title="article.article_title"
                >
                  {{ article.article_title }}
                </a>
                <span class="text-gray-400 text-xs sm:text-sm">
                  {{
                    useDateFormat(
                      new Date(article.createdAt),
                      'YYYY-MM-DD HH:mm:ss'
                    )
                  }}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDateFormat } from '@vueuse/core'
import getArticleArchives from '@/api/Desktop/articles/getArticleArchives.js'
const YearList = ref([])
const monthMap = ref({})
const activeMonth = ref(null)
const activeYear = ref(null)
// 获取归档数据并处理
getArticleArchives().then((res) => {
  const data = res.data.data

  // 清空原有数据
  YearList.value = []
  monthMap.value = {}

  // 遍历年份（按升序处理）
  Object.keys(data)
    .sort()
    .forEach((year) => {
      YearList.value.unshift(year) // 年份倒序排列（新的在前）

      // 处理月份数据
      const months = Object.entries(data[year])
        .sort((a, b) => b[0] - a[0]) // 月份倒序排列
        .map(([month, articles]) => ({
          month: parseInt(month),
          articles: articles.reverse() // 文章按创建时间倒序
        }))

      monthMap.value[year] = months
    })
})

// 控制年份展开状态
const toggleYear = (year) => {
  activeYear.value = activeYear.value === year ? null : year
  activeMonth.value = null // 关闭展开的月份
}

// 控制月份展开状态
const toggleMonth = (monthIndex) => {
  activeMonth.value = activeMonth.value === monthIndex ? null : monthIndex
}
</script>
<style>
/* 动画效果 */
.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}

.transition {
  transition: all 0.3s ease-in-out;
}

/* 背景渐变效果 */
.bg-white {
  background: linear-gradient(to bottom, #ffffff, #f7f7f7);
}
</style>
